<template>
    <div>
        <div id="chartSix" ref="chartSix"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    鸽笼总数：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        "
                        >12</i
                    >
                    个
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "echartSix",
    mounted() {
        this.initCharts();
    },
    updated() {},
    data() {
        return {
            data: [], //饼图数据
            option: {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "5%",
                    left: "left",
                    orient: "vertical",
                    data: this.legrndData,
                },
                title: [
                    {
                        left: "center",
                        text: "各状态鸽笼数量",
                    },
                ],
                series: [
                    {
                        name: "数据",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        left: "center",
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "40",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [],
                    },
                ],
            },
            echartSix: null, //图表对象
        };
    },
    watch: {
        cageCountData: {
            deep: true,
            handler(newValue, oldValue) {
                this.option.series[0].data = newValue;
                this.echartSix.setOption(this.option);
                window.addEventListener("resize", () =>
                    this.echartSix.resize()
                );
            },
        },
    },
    props: {
        cageCountData: {
            //图表数据
            type: Array,
            default: function () {
                return [];
            },
        },
        legrndData: {
            //图例数据
            type: Array,
            default: function () {
                return [];
            },
        },
        totalCage: {
            //总鸽笼数
            type: Number,
        },
    },
    methods: {
        //设置图表
        initCharts() {
            this.$nextTick(() => {
                this.echartSix = this.$echarts.init(this.$refs.chartSix);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
#chartSix {
    width: 580px;
    height: 328px;
}
</style>